
//1.返回顶部
//判断当距离大于600的时候显示回到顶部

//获取元素
let inputret=document.querySelector('#inputret')
console.log(inputret);

window.addEventListener('scroll',function(){
    
//获取距离
let scrolllength=document.documentElement.scrollTop
// console.log(scrolllength);
    //判断
    if(scrolllength>=600){
      inputret.style.display='block'
    }else{
      inputret.style.display='none'
    }
})

//2.点击retop平缓回到顶部
inputret.addEventListener('click',function(){
/*     window.scrollTo({
        top:0,
        behavior:'smooth'
    }) */
     buffer(document.documentElement,{scrollTop:0})
})

//3.粒子效果的调用函数
//调用
CanvasParticle( {
  vx: 4,	//小球x轴速度,正为右，负为左
  vy: 4,	//小球y轴速度
  height: 2,	//小球高宽，其实为正方形，所以不宜太大
  width: 2,
  count: 400,		//点个数
  color:  "200,193,193", 	//点颜色
  stroke:  "0,0,0", 		//线条颜色
  dist: 6000, 	//点吸附距离
  e_dist: 20000, 	//鼠标吸附加速距离
  max_conn: 10 	//点到点最大连接数
});

/* 
* 4.模拟数据
*/
//价格模拟服务器的数据,用委派渲染

//定义数据
let data = [
  { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
  { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
  { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
]

//需求:遍历数据date,组装成HTML代码,并且渲染到APIbannerul2无序列表中

//获取元素
let APIbannerul2=document.querySelector('.APIbannerul2')
// let APIbannerulli=document.querySelectorAll('.APIbannerul2 li')
// console.log(APIbannerul2);

function renderdate(){

//保存组装好的html代码
let detahtml=''

data.forEach(function(v,i){
  // console.log(1);

  //组装代码
  // 组装数据是组装的很多个li所以+=
  detahtml +=`
  <li class=" ${i===0 ? 'active':''}" data-price="${v.price}" data-unit-price="${v.unitPrice}">
  ${v.count}次
  </li> 
  `
})
//渲染到APIbannerul2
// 渲染也是因为原来ul里面就有div数据不能直接=,=是赋值所以+=
APIbannerul2.innerHTML += detahtml
}
renderdate()


/* *
*5.点击APIbannerul2,利用事件委派,让后三个儿子li发生点击事件,添加类名的方式产生激活样式,以及渲染数据到文本APIbannerrightp3的span中
 */
let price1=document.querySelector('.price1')
let price2=document.querySelector('.price2')

// console.log(price1,price2);
//1.用事件委派让父级发生事件,利用冒泡原理,让后三个子元素li发生事件
APIbannerul2.addEventListener('click',function(e){
  // console.log(8);
  //获取找到目标元素
  // console.log(e.target.nodeName==='LI');
  let bool=e.target.nodeName==='LI'

  //ul里面儿子的总长度
  // console.log(APIbannerul2.children.length);
  //判断
  if(bool){

    //先清除所有目标元素li的激活样式active
    console.log(APIbannerul2.children);
    //此时遍历不能用forEach因为打印可查看[[Prototype]]: HTMLCollection是否有forEach,没有就不能用
   for(let i=1;i<APIbannerul2.children.length;i++){
      // console.log(9);
      APIbannerul2.children[i].classList.remove('active')
    }  
 
    //添加当前移入的激活样式(active)
    // e.target.className='active',在标签已有类名的时候,不能用className,因为=直接赋值,之前的类名就会被替换
    //多类名的时候添加用classList.add('')删除用classList.remove('')
    e.target.classList.add('active')

    //设置价格
    // console.log(e.target.dataset.Price);
    price1.textContent=e.target.dataset.price
    // 设置单价
    price2.textContent=e.target.dataset.unitPrice
  } 
})

/* 
*6.选项卡
*/

tabCard('.navlist1 li', '.navlistleft .countent6')